class View extends React.Component {
    constructor(props) {
        super(props);
        this.ownerCode = $.query.get("ownerCode");
        this.state = {
            ownerInfo: {},
            faceInfos: [],
            commCode: ''
        }
    }

    componentDidMount() {
        layui.use(['form', 'laypage'], () => {
                this.layer = layui.layer;
                // noinspection ES6ModulesDependencies
                this.form = layui.form();
                this.form.on('switch(switch)', (data) => {
                    const state = this.refs['switch' + data.value].checked === true ? 0 : 1;
                    const checkboxElem = data.elem;
                    checkboxElem.checked = state !== 0;
                    const params = {};
                    params.state = state;
                    params.id = data.value;
                    postJson('/face/updateFaceState.x', $.param(params), (data) => {
                        checkboxElem.checked = state === 0;
                    });
                });
                this.index = parent.layer.getFrameIndex(window.name);
                this.queryOwnerInfo();
            }
        );
    }

    componentDidUpdate() {
        if (this.index) {
            parent.layer.iframeAuto(this.index);
        }
        if (this.form) {
            this.form.render('checkbox');
        }
    }

    queryOwnerInfo() {
        let params = {};
        params.ownerCode = this.ownerCode;
        postJson('/owner/getOwner.x', $.param(params), function (data) {
            this.arrayList = data.list;
            this.setState({
                ownerInfo: data.data
            });
        }.bind(this));

        postJson('/face/queryFaceInfoByOwnerCode.x', $.param(params), function (data) {
            this.setState({
                faceInfos: data.data
            });
        }.bind(this))
    }

    commLoadComplete() {
    }

    deleteFace(item) {
        const index = layer.confirm('您确定要删除【' + item.buildingAliasName + ' ' + item.unitAliasName + '】权限？', {
            btn: ['确定', '取消']
        }, () => {
            let params = {};
            params.id = item.faceInfo.id;
            params.state = 2;
            postJson('/face/updateFaceState.x', $.param(params), (data) => {
                this.setState({
                    faceInfos: this.state.faceInfos.filter(array => array.faceInfo.id !== item.faceInfo.id)
                });
            });
            layer.close(index);
        });
    }

    showImage(url) {
        if (url) {
            layer.photos({
                photos: {
                    "title": "图片",
                    "data": [
                        {
                            "src": url
                        }
                    ]
                }, anim: 5
            });
        } else {
            layer.msg("此记录无照片!");
        }
    }

    faceAuthModal(ownerInfo) {
        this.setState({
            commCode: ownerInfo.commCode
        }, () => {
            const index = layer.open({
                type: 1,
                area: ['90%', 'auto'],
                title: false,
                shadeClose: true,
                offset:'10%',
                content: $('#face_auth_modal'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                btn: ['确定添加'],
                yes: () => {
                    let buildingInfo = this.refs.buildingSelectUtils.getData();
                    if (!buildingInfo.unit || !buildingInfo.building) {
                        parent.layer.msg('请选择楼宇信息！', {icon: 5});
                        return;
                    }
                    for (const i in this.state.faceInfos) {
                        const faceInfo = this.state.faceInfos[i].faceInfo;
                        if (faceInfo.building === buildingInfo.building && faceInfo.unit === buildingInfo.unit) {
                            parent.layer.msg('权限已经存在！', {icon: 5});
                            return;
                        }
                    }
                    layer.close(index);
                    let params = {};
                    params.ownerCode = ownerInfo.ownerCode;
                    params.building = buildingInfo.building;
                    params.unit = buildingInfo.unit;
                    postJson('/face/addFaceAuth.x', $.param(params), (data) => {
                        console.log("data.data", data.data);
                        this.state.faceInfos.push(data.data);
                        this.setState({});
                    });
                }
            });
        });
    }


    faceInfoView(faceInfos) {
        return faceInfos.map((item) => {
            return <div>
                <div className="Center-Container" style={{height: 30}}>
                    <div className="Absolute-Center" style={{height: '100%'}}>
                        <div style={{
                            marginTop: 8,
                            fontSize: 20,
                            float: 'left'
                        }}>{item.buildingAliasName + ' ' + item.unitAliasName}</div>
                        <input type="checkbox" checked={item.faceInfo.state === 0} name="open"
                               data-skin="switch" value={item.faceInfo.id}
                               data-filter="switch" ref={'switch' + item.faceInfo.id} data-text="ON|OFF"/>
                        {item.faceInfo.parentId !== 0 ?
                            <button style={{marginTop: 5, marginLeft: 10}}
                                    type="button"
                                    className="layui-btn layui-btn-mini layui-btn-danger"
                                    onClick={() => this.deleteFace(item)}>删除</button>
                            : ''
                        }
                    </div>
                </div>
                <hr/>
            </div>
        });
    }

    faceInfoImage(faceInfos) {
        for (const i in faceInfos) {
            if (faceInfos[i].faceInfo.parentId === '0') {
                return <tr>
                    <td>照片</td>
                    <td>
                        <div className="Center-Container" style={divImgStyle}>
                            <img className="Absolute-Center" style={imgStyle}
                                 src={faceInfos[i].faceInfo.imageUrl + '?' + Math.random().toString(36).substr(3)}
                                 onClick={() => this.showImage(faceInfos[i].faceInfo.imageUrl + '?' + Math.random().toString(36).substr(3))}/>
                        </div>
                    </td>
                </tr>
            }
        }
    }

    render() {
        const {ownerInfo, faceInfos} = this.state;
        return <div>
            <form className="layui-form layui-form-pane">
                <div className="layui-form-item">
                    <table className="layui-table" data-skin="line">
                        <colgroup>
                            <col width="200px"/>
                            <col/>
                        </colgroup>
                        <tbody>
                        <tr>
                            <td>业主</td>
                            <td>{ownerInfo ? ownerInfo.ownerName : ''}</td>
                        </tr>
                        <tr>
                            <td>性别</td>
                            <td>{ownerInfo ? ownerInfo.ownerSex === '0' ? '男' : '女' : ''}</td>
                        </tr>
                        <tr>
                            <td>身份证</td>
                            <td>{ownerInfo ? ownerInfo.ownerNo : ''}</td>
                        </tr>
                        <tr>
                            <td>移动电话</td>
                            <td>{ownerInfo ? ownerInfo.ownerMob : ''}</td>
                        </tr>

                        <tr>
                            <td>房屋信息</td>
                            <td>{ownerInfo ? ownerInfo.roomInfo : ''}</td>
                        </tr>

                        {faceInfos && faceInfos.length > 0 ?
                            <tr>
                                <td>
                                    人脸识别权限&nbsp;&nbsp;
                                    <button type="button" className="layui-btn layui-btn-mini"
                                            onClick={() => this.faceAuthModal(ownerInfo)}>添加权限
                                    </button>
                                </td>
                                <td>
                                    {this.faceInfoView(faceInfos)}
                                </td>
                            </tr> : ''}
                        {this.faceInfoImage(faceInfos)}
                        </tbody>
                    </table>
                </div>
            </form>
            <div id="face_auth_modal"
                 style={{
                     display: 'none',
                     paddingLeft: '10px',
                     paddingRight: '10px',
                     paddingTop: '30px'
                 }}>
                <BuildingSelectUtils ref="buildingSelectUtils"
                                     defCommCode={this.state.commCode}
                                     commLoadComplete={this.commLoadComplete}
                                     floorStyle={{display: 'none'}}
                                     roomStyle={{display: 'none'}}/>

            </div>
            <style>
                {`
                   .layui-layer-page .layui-layer-content {
                        overflow: visible
                    }
                `}
            </style>
        </div>
    }
}

let divImgStyle = {
    border: '1px solid #CDCDC1',
    float: 'left',
    marginLeft: '10px',
    width: '150px',
    height: '150px'
};

let imgStyle = {
    'max-height': '90%',
    'max-width': '90%'
};

ReactDOM.render(
    <View/>, document.getElementById('root')
);